<template>
  <div class="farm-map">
    <div
      v-for="(item, index) in houseList"
      :key="index"
      :class="[`code-${index + 1}`]"
      class="house-item"
      @click="handleChangeHouse(index)"
    ></div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useEventBus } from '@vueuse/core'
  import { MapClickEvent } from '@/types/common.ts'

  const houseList = ref([
    { code: '1#', left: 430, top: 76 },
    { code: '2#', left: 360, top: 0 },
    { code: '3#', left: 0, top: 0 },
    { code: '4#', left: 0, top: 0 },
    { code: '5#', left: 0, top: 0 },
    { code: '6#', left: 0, top: 0 },
    { code: '7#', left: 0, top: 0 },
    { code: '8#', left: 0, top: 0 },
    { code: '9#', left: 0, top: 0 },
    { code: '10#', left: 0, top: 0 },
    { code: '11#', left: 0, top: 0 },
    { code: '12#', left: 0, top: 0 },
    { code: '13#', left: 0, top: 0 }
  ])

  const bus = useEventBus('farm')
  const handleChangeHouse = (index: number) => {
    bus.emit(MapClickEvent.SWITCH_HOUSE_INFO, { index })
  }
</script>

<style lang="scss" scoped>
  .farm-map {
    position: absolute;
    top: 340px;
    left: 50%;
    width: 960px;
    height: 508px;
    transform: translateX(-540px);
    z-index: 10;
    background: url('@/assets/images/control-map.png') no-repeat top left;
    background-size: 100% 100%;
    user-select: none;
    user-drag: none;
    //height: 200px;
    //transform: translate(-50%, -50%);
    .house-item {
      position: absolute;
      width: 36px;
      height: 36px;
      //background: red;
      //opacity: 0.5;
      user-select: none;
      cursor: pointer;
      &.code-1 {
        left: 44.6%;
        top: 15.4%;
      }
      &.code-2 {
        left: 36.8%;
        top: 30.8%;
      }
      &.code-3 {
        left: 25.4%;
        top: 38.5%;
      }
      &.code-4 {
        left: 31.2%;
        top: 49.2%;
      }
      &.code-5 {
        left: 41.7%;
        top: 44%;
      }
      &.code-6 {
        left: 56.7%;
        top: 34.6%;
      }
      &.code-7 {
        left: 57%;
        top: 20.8%;
      }
      &.code-8 {
        left: 66.2%;
        top: 27.5%;
      }
      &.code-9 {
        left: 79.8%;
        top: 27.5%;
      }
      &.code-10 {
        left: 75.8%;
        top: 42.8%;
      }
      &.code-11 {
        left: 56.5%;
        top: 57.3%;
      }
      &.code-12 {
        left: 46.4%;
        top: 68.3%;
      }
      &.code-13 {
        left: 48.5%;
        top: 87.2%;
      }
    }
  }
</style>
